<template>
	<view style="width:100%; height:500rpx">
		<l-echart ref="chartRef"></l-echart>
	</view>
</template>

<script setup>
	const echarts = require('../static/js/echarts.min');
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue';
	const chartRef = ref(null)

	const props = defineProps({
		data: {
			type: Array,
			default: []
		},
    xAxis: {
      type: Array,
      default: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
	})

	const state = reactive({
		echarts: null
	})

	async function drawLines() {
		if (!chartRef.value) return
		const myChart = await chartRef.value.init(echarts)
		let option = {
			xAxis: {
				type: 'category',
				data: props.xAxis
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: props.data,
				type: 'line'
			}]
		}
		myChart.setOption(option);
		if(window){
			window.addEventListener('resize', () => {
				myChart.resize()
			});
		}
		
	}

	onMounted(() => {
		setTimeout(async () => {
			drawLines();
		}, 100)
	})
</script>

<style lang="scss" scoped>

</style>
